<!-- 在template里面编写网页元素HTML标签，或者添加vue组件 -->
<template>
  <!-- big-box：整个网页大小的大盒子，添加背景图片 -->
  <div class="big-box">
    <div class="user-box">
      <div class="title">
        <router-link to="/login">登录</router-link>
        <span>·</span>
        <router-link to="/register">注册</router-link>
      </div>
      <!-- 
                注册表单
                label-width：标签宽度，我们不需要修改成0
                model：响应式数据，双向绑定的参考数据对象
                rules：规则 表单验证用的
                ref：给表单起的引用名称
             -->
      <el-form
        :model="regForm"
        :rules="rules"
        ref="regForm"
        label-width="0"
        class="demo-ruleForm"
      >
        <el-form-item prop="regname">
          <el-input
            v-model="regForm.regname"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="regpwd">
          <el-input
            v-model="regForm.regpwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="regForm.repassword"
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
        <!-- 注册按钮 -->
        <el-form-item>
          <el-button type="success" class="reg-btn" @click="register('regForm')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<!-- script是vue脚本编辑区域 -->
<script>
// 导入axios模块  使用es6方式导入
// import axios from "axios";
// 引入封装好
import {register} from "@/api/admin.js"
export default {
  data() {
    return {
      regForm: {
        regname: "",
        regpwd: "",
        repassword: "",
      },
      rules: {
        // 具体的表单元素验证规则，使用数组，数组名称必须和表单元素prop一致
        // required：必填   message：错误提示   trigger：触发条件   pattern：匹配方案（正则）
        regname: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
          // 长度在3-12之间，匹配正确字符
          {
            pattern: /^[a-zA-z#$@\d]{3,12}/,
            message: "长度在3-12之间",
            trigger: "blur",
          },
        ],
        // 密码验证规则
        regpwd: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
          // 长度在3-12之间，匹配正确字符
          {
            pattern: /^[a-zA-z#$@\d]{3,12}/,
            message: "长度在3-12之间",
            trigger: "blur",
          },
        ],
        // 确认密码规则   必须要和密码框的内容一致才能通过
        repassword: [
          {
            // 可以直接使用匿名函数来做验证
            validator: (rule, value, callback) => {
              console.log(value);
              // value：填入确认密码表单文本框中的值
              // 如何判断填写的值和密码框中的值一致呢？
              console.log(this.regForm.regpwd);
              if (value == this.regForm.regpwd) {
                // 两次输入密码一致
                callback();
              } else {
                // 密码不一致
                callback(new Error("两次密码不一致"));
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    register(myForm) {
      // alert("点击注册");
      this.$message({
        message: "注册中……",
      });
      setTimeout(() => {
        // 选择当前表单对象
        this.$refs[myForm].validate((valid) => {
          // valid：表示验证通过
          if (valid) {
            // alert("验证通过");
            this.$message({
              message: "验证通过",
              type: "success",
            });
            // 发送注册的请求
            register(this.regForm)
              .then((res) => {
                // then里面接收的异步数据，就是服务器响应回前端页面的数据
                console.log(res);
                // 到这里才是前端要干的事情，（渲染 render函数）
                // 判断服务器给我的响应code=0，
                if (res.data.code === 0) {
                  this.$message({
                    message: "注册成功",
                    type: "success",
                  });
                  // 跳转到登录 this.$router.push(路径)
                  this.$router.push("/login");
                } else if (res.data.code === -1) {
                  this.$message({
                    message: "用户名已存在",
                    type: "error",
                  });
                  // 清空
                  this.$refs[myForm].resetFields();
                }
              })
              .catch((err) => {
                console.error(err);
              });
          } else {
            // alert("验证失败");
            this.$message({
              message: "注册失败！",
              type: "error",
            });
            // 失败不提交表单
            return;
          }
        });
      }, 1000);
    },
  },
};
</script>

<!-- 样式编辑区域 scss：预编译 scoped：范围本组件 -->
<style lang="scss" scoped>
.reg-btn {
  width: 100%;
}
//这个样式是路由链接激活之后
.router-link-active {
  color: orangered !important;
  font-weight: bold;
  border-bottom: 2px solid orangered !important;
}
.big-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("./img/9392941.jpg") no-repeat;
  background-size: cover;
  color: white;
}
.user-box {
  width: 300px;
  min-height: 300px;
  background: #fff;
  margin: 80px auto;
  padding: 20px 30px;
  //标题：登录 注册样式
  .title {
    text-align: center;
    font-size: 20px;
    color: #969696;
    font-size: 20px;
    margin-bottom: 60px;
    //超链接
    a {
      color: #969696;
      margin: 20px 15px;
      padding: 15px 10px;
    }
  }
}
</style>
